<template>
  <ChartHeader title="各学校未测分布"></ChartHeader>

  <v-chart class="chart" :option="option" />
</template>

<script lang="ts" setup>
import { defineProps, reactive, toRefs, watchEffect } from 'vue'
import { NumData, TotalData } from '../types'
import { useAllGradeNoTestNum } from '../use/useAllGradeNoTestNum'
import ChartHeader from './ChartHeader.vue'
import VChart from 'vue-echarts'

const props = defineProps<{
  numData: NumData | null
  totalData: TotalData | null
}>()

const { option } = useOptions()

function useOptions() {
  const { numData } = toRefs(props)

  const { gradeNoAxisData, gradeNoSeriesData } = useAllGradeNoTestNum({
    numData,
  })

  const option = reactive({})

  watchEffect(() => {
    Object.assign(option, {
      title: {
        // text: title,
      },
      grid: {
        top: '10%',
        bottom: 30,
        height: 140,
      },
      xAxis: {
        type: 'category',
        data: gradeNoAxisData.value,
        axisLabel: {
          interval: 0,
          rotate: 40,
        },
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          type: 'bar',
          emphasis: {
            focus: 'series',
          },
          barMaxWidth: 20,
          data: gradeNoSeriesData.value,
          itemStyle: {
            normal: {
              color: '#409eff',
              borderRadius: [5, 5, 0, 0],
              label: {
                show: true, //开启显示
                position: 'top', //在上方显示
                textStyle: {
                  //数值样式
                  color: 'black',
                  fontSize: 12,
                },
              },
            },
          },
        },
      ],
    })
  })

  return {
    option,
  }
}
</script>

<style scoped lang="less">
@import url('./board-common.less');
.chart {
  height: 280px;
}
</style>
